<template>
  <a-modal
    :title="form && form.id ? '修改字典' : '新建字典'"
    centered
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form-model ref="ruleForm" :model="form"
                    :rules="rules" v-bind="formLayout" labelAlign="left">
        <a-form-model-item ref="name" label="名称" prop="name">
          <a-input :disabled="disabled" v-model="form.name"/>
        </a-form-model-item>
        <a-form-model-item ref="tag" label="描述" prop="remark">
          <a-input :disabled="disabled" v-model="form.remark"/>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 5}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 19}
      }
    }
    return {
      treeData: [],
      form: {
        id: undefined,
        name: undefined,
        remark: undefined,
      },
      disabled: false,
      rules: {
        name: [
          { required: true, message: '请输入标题', trigger: 'blur' },
        ],
        remark: [
          { required: true, message: '请输入描述', trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    this.$watch('model', () => {
      this.disabled = this.model.disabled
      this.form = {
        ...this.form,
        ...this.model
      };
    })
  },
  methods: {
    handleOk() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$emit('ok', this.form)
        } else {
          return false;
        }
      });
    },
    resetFields() {
      this.$refs.ruleForm.resetFields()
    },
  }
}
</script>
